<template>
  <div>    
    <div>{{ topVal }}</div> 
    <div class="viewport"
    ref="viewport"
    :style="{height: itemHeight * count + 'px'}"
    @scroll="handleScroll"
    >
      <!-- 占位容器，撑开容器的高度 -->
      <!-- 所有目录节点的数量和ipc节点的数量的和 -->
      <div class="placeholder"
      :style="{height: 1000 * itemHeight + 'px'}"
      ></div>
      <!-- 内容区域，只展示10条数据 -->
      <div class="list">
        <div
          v-for="item in showListData"
          :key="item.id"
          class="item"
          :style="{'min-height': itemHeight + 'px'}"
          @click="handleNodeClick(item)"
        >
        <i class="el-icon el-icon-caret-right" v-if="!item.showChildren"></i>
        <i class="el-icon el-icon-caret-bottom" v-else></i>
        <span>{{ item.name }}</span>
          <div v-if="item.showChildren">
            <div :style="{'min-height': itemHeight + 'px', 'margin-left': '5px'}" v-for="child in item.ipc_list" :key="child.uuid">
              <span>{{ child.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="list">
        <ipcTree
        :style="{top: topVal + 'px'}"
        :treeData="showListData"
        ></ipcTree>
      </div> -->
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          :height="tableHeight"
          :header-cell-style="{ background: '#F7F9FA', color: '#555' }"
          :cell-style="{ padding: '0px' }"
          ref="ipc-table"
          @row-click="clickRow"
          row-class-name="tableRow"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column
            label="名称"
            align="center"
            prop="name"
            width="400px"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
// import ipcTree from './ipcTree.vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    treeCount: Number
  },
  components: {
    // ipcTree
  },
  data () {
    return {
      itemHeight: 40,
      count: 10,
      allListData: {
        name: '根目录',
        showChildren: true,
        id: 1,
        ipc_list: [],
        children: [
          {
            name: '默认目录',
            id: 2,
            showChildren: true,
            ipc_list: [
            ],
            children: []
          },
          {
            name: '目录1',
            id: 3,
            showChildren: true,
            ipc_list: [],
            children: []
          },
          // {
          //   name: '目录2',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录3',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录4',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录5',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录6',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录7',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录8',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录9',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录10',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
          // {
          //   name: '目录11',
          //   id: 4,
          //   showChildren: false,
          //   ipc_list: [],
          //   children: []
          // },
        ]
      },
      startIndex: 0,
      endIndex: 10,
      topVal: 0, // 父元素滚动的位置
      tableData: [
        {
          name: '1'
        },
        {
          name: '2'
        },
        {
          name: '3'
        },
        {
          name: '4'
        },
        {
          name: '5'
        },
        {
          name: '6'
        },
        {
          name: '7'
        },
        {
          name: '8'
        },
        {
          name: '9'
        },
        {
          name: '10'
        },
      ],
      tableHeight: 400
    }
  },
  created() {
    this.getData()
    this.virtualScroll(this.allListData.children)
    
  },
  mounted() {
    this.moveTable()
  },
  methods: {
    clickRow (row) {
      console.log(row, 'row')
    },
    moveTable () {
      let dom = document.getElementsByClassName("el-table__row");
      console.log(dom, 'dom');
      for(let row of dom) {
        // row.setAttribute("draggable", true);
        // 添加 dragstart 
        // row.addEventListener("dragstart", (e) => { this.handleDragStart(e, uuid) });
        console.log('row,', row)
        row.addEventListener("mousedown", (e) => {
          console.log('这里触发了几次')
          this.onMousedown(e, row) 
        });
        // 添加 dragover 
        // 添加 drop 
        // row.addEventListener("drop",  (e) => { this.handleDrop(e, uuid) });
      }
    },
    onMousedown (event, data) {
      console.log(event, data, 'event, data');
    },
    handleNodeClick (item) {
      this.$set(item, 'showChildren', !item.showChildren)
    },
    getData () {
      for (let i = 1; i <= 4; i++) {
        // 循环添加十万条数据
        this.allListData.children[0].ipc_list.push(
          { uuid: i, name: `ipc${i}`, value: i, ip: `1.1.1.${i}` }
        )
      }
      for (let i = 5; i <= 8; i++) {
        // 循环添加十万条数据
        this.allListData.children[1].ipc_list.push(
          { uuid: i, name: `ipc${i}`, value: i, ip: `1.1.1.${i}` }
        )
      }
      console.log(this.countItems(this.allListData), 'countItems');
    },
    handleScroll () {
      /* 拿到滚动的起始坐标和结束的坐标 */
      let scrollValue = this.$refs.viewport.scrollTop // 滚动的距离
      this.topVal = scrollValue
      this.startIndex = Math.floor(scrollValue / this.itemHeight) // 从第几个数据开始
      this.endIndex = this.startIndex + this.count
    },
    virtualScroll (treeData) {
      let showTreeData = []
      for (let i = 0; i < treeData.length; i++) {
        let item = treeData[i]
        showTreeData.push(item)
      } 
      return showTreeData
    }, 
    countItems (node) {
      let totalCatalog = 0
      let totalIpc = 0
      // 展开节点才去遍历
      if (node.showChildren && node.children) {
        for (let child of node.children) {
          // 当前节点的数量+子节点的数量,子节点是否展开,下一次会判断
          totalCatalog = node.children.length + this.countItems(child)
          totalIpc += node.ipc_list.length
        }
      } else {
        // 不是showChildren,当前节点的数量++
        ++totalCatalog
      }
      return totalCatalog + totalIpc
    },
    changeShowData() {
      return this.allListData.children
    }
  },
  computed: {
    showListData() {
      // return {children: [{...this.allListData, children: this.changeShowData()}]}
      return this.virtualScroll(this.allListData.children.slice(0, 2))
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.viewport {
  width: 200px;
  position: relative;
  overflow: auto;
  margin: auto;
}
.list {
  width: 200px;
  position: absolute;
  top: 0;
}
.item {
  background-color: skyblue;
}
</style>
